<template>
  <ScaleScreen
    :width="4500"
    :height="1080"
    class="scale-wrap"
    :selfAdaption="$store.state.setting.isScale2"
  >
    <!-- <ScaleScreen :width="3840" :height="1080" class="scale-wrap" :selfAdaption="$store.state.setting.isScale2"> -->
    <!-- <div
      class="bg"
      :style="{
        backgroundImage: `url('${
          $store.state.setting.isMain
            ? require('../assets/img/base/pageBg2.png')
            : require('../assets/img/base/pageBg.png')
        }')`,
      }"
    > -->
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 头部 s -->
        <div class="d-flex jc-center title_wrap">
          <div class="d-flex jc-center">
            <div v-if="changeTitle" @click="changeTitle = false" class="title">
              <span class="title-text">临沂商贸物流大数据平台</span>
            </div>
            <div v-else @click="changeTitle = true" class="title">
              <span class="title-text">山东省商贸物流产业大脑</span>
            </div>
          </div>
          <div class="timers">
            <i
              class="blq-icon-shezhi02"
              style="margin-left: 10px"
              @click="showSetting"
            ></i>
          </div>
        </div>
        <div class="bottom_wrap">
          <div
            class="box"
            :class="{ actived: $store.state.setting.pageNo === 0 }"
            @click="() => this.$store.commit('setting/setPageNo', 0)"
          >
            首页
          </div>
          <div
            class="box"
            :class="{ actived: $store.state.setting.pageNo === 2 }"
            @click="() => this.$store.commit('setting/setPageNo', 2)"
          >
            线路
          </div>
          <div
            class="box"
            :class="{ actived: $store.state.setting.pageNo === 3 }"
            @click="() => this.$store.commit('setting/setPageNo', 3)"
          >
            园区
          </div>
          <div
            class="box"
            :class="{ actived: $store.state.setting.pageNo === 1 }"
            @click="() => this.$store.commit('setting/setPageNo', 1)"
          >
            进出口
          </div>
        </div>
        <div class="bottom-flag">{{ now }}</div>
        <!-- 头部 e-->
        <!-- 内容  s-->
        <router-view></router-view>
        <!-- 内容 e -->
      </div>
    </div>
    <Setting ref="setting" />
  </ScaleScreen>
</template>

<script>
import { formatTime } from '../utils/index.js';
import Setting from './setting.vue';
import ScaleScreen from '@/components/scale-screen/scale-screen.vue';
// import Map from './layout/mapMars3d.vue';
// import Map from './layout/SuperCloud.vue';

export default {
  components: { Setting, ScaleScreen },
  data() {
    return {
      changeTitle: true,
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      now: '数据统计截止日期为2024年5月20日',
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    showSetting() {
      this.$refs.setting.init();
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
        var curDate = new Date();
        var preDate = new Date(curDate.getTime() - 24 * 60 * 60 * 1000);
        this.now = formatTime(preDate, '数据统计截止日期为yyyy年MM月dd日');
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      let timer = setTimeout(() => {
        this.loading = false;
        clearTimeout(timer);
      }, 500);
    },
  },
};
</script>

<style lang="scss">
@import './layout.scss';
</style>
